<template>
  <div class="level_content">
    <div class="level_rules">
      <div class="level_tip level_tip_sec cc">
        <span class="icon_xx"></span>
        {{ t('level_page_mAward') }}
        <span class="tips">
          <i></i>
          {{ t('level_page_vnd') }}<br>

        </span>

      </div>

      <div class="level_list">
        <div class="flex space_around le_l_header">
          <span> {{ t('level_page_member') }} </span>
          <span> {{ t('level_page_pBet') }} </span>
          <span> {{ t('level_page_bonus') }} </span>
          <span> {{ t('level_page_monGift') }} </span>
        </div>
        <div class="flex align_center le_l_content">
          <div class="le_l_l le_l_l_sec">
            <div class="level_content_table" v-for="(item, index) in vipLevelRewardConfig" :key="index">
              <div> VIP{{ item.level }} </div>
              <div class="num">{{ formatBigNumber(item.target_bet_money) }}</div>
              <div class="num">{{ formatBigNumber(item.promotional_reward_status.money) }}</div>
              <div class="num">{{ formatBigNumber(item.gift_money_amount) }}</div>
            </div>
          </div>
        </div>

      </div>
      <div class="level_tip level_tip_sec">{{ t('level_upgrade_standard') }}<br></div>
      <div class="level_tip_content">{{ t('level_upgrade_content') }}</div>
      <div class="level_tip level_tip_sec">{{ t('level_feedback_bonus') }}<br></div>
      <div class="level_tip_content">{{ t('level_feedback_content') }}</div>
      <div class="level_tip level_tip_sec">{{ t('level_audit_desc') }}<br></div>
      <div class="level_tip_content">{{ t('level_audit_content') }}</div>
      <div class="level_tip level_tip_sec">{{ t('level_vip_desc') }}<br></div>
      <div class="level_tip_content">{{ t('level_vip_content') }}</div>
      <div class="level_tip level_tip_sec">{{ t('level_explanation') }}<br></div>
      <div class="level_tip_content" style="margin-bottom: 22px;">{{ t('level_explanation_content') }}</div>

      <!--      <div class="level_tip_content">-->
      <!--        {{ t('level_page_rule_1') }}<br>-->
      <!--        {{ t('level_page_rule_2') }}<br>-->
      <!--        {{ t('level_page_rule_3') }}<br>-->
      <!--        {{ t('level_page_rule_4') }}<br>-->
      <!--        {{ t('level_page_rule_5') }}<br>-->
      <!--        {{ t('level_page_rule_6') }}-->
      <!--      </div>-->

      <div class="level_tip level_tip_sec cc"> <span class="icon_xx"></span>{{ t('level_page_mAward') }} </div>
      <div class="level_list level_list_sec">
        <div class="flex space_around le_l_header">
          <span> {{ t('level_page_member') }} </span>
          <span> {{ t('level_page_live') }} </span>
          <span> {{ t('home_page_slot') }} </span>
          <span> {{ t('home_page_sportsGame') }} </span>
          <span> {{ t('home_page_lotteryGame') }} </span>
          <span> {{ t('home_page_pokerGame') }} </span>
          <span> {{ t('home_page_eSports') }} </span>
        </div>
        <div class="flex align_center le_l_content">
          <div class="le_l_l le_l_l_sec">
            <div class="level_bet_table" v-for="(item, index) in vipLevelRewardConfig" :key="index">
              <div> VIP{{ item.level }} </div>
              <div v-for="(item_1) in item.ratio.split(',')"> {{ toFixedNumber(Number(item_1) * 100) + '%' }} </div>
            </div>
          </div>
        </div>

      </div>

      <div class="level_tip level_tip_sec cc"> <span class="icon_xx"></span>{{ t('level_page_rule_sec_11') }} </div>
      <div class="level_tip_content vv">
        <div>{{ t('level_page_rule_sec_1') }}</div>
        <div>
          {{ t('level_page_rule_sec_2') }}<br>
          <span>{{ t('level_page_rule_sec_0') }}</span><br>
          <span>{{ t('level_page_rule_sec_3') }}</span><br>
          <span>{{ t('level_page_rule_sec_4') }}</span><br>
          <span>{{ t('level_page_rule_sec_5') }}</span><br>
        </div>
        <div>
          {{ t('level_page_rule_sec_6') }}{{ t('level_page_rule_sec_7') }}<br>
          <span>{{ t('level_page_rule_sec_8') }}</span><br>
          <span>{{ t('level_page_rule_sec_9') }}</span><br>
          <span>{{ t('level_page_rule_sec_10') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref, watch } from 'vue';
import { useI18n } from "vue-i18n";
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from '@/netBase/NetPacket';
import pinia from "@/store";
import { User } from '@/store/user';
import { storeToRefs } from "pinia";
import { toFixedNumber } from "@/utils/publicMethods.ts";

const { t } = useI18n();
const store = User(pinia);
const { VIPinfo }: any = storeToRefs(store);
const baseVipLevelRewardConfig = [ // 基本数据
  {
    "level": 1,
    "target_bet_money": 0,
    "promotional_reward_status": {
      "status": 0,
      "money": 0
    },
    "gift_money_amount": 0,
    "ratio": "0.004, 0.006, 0.004, 0.0005, 0.006, 0.004"
  },
]
const vipLevelRewardConfig = ref(VIPinfo.value?.vip_level_reward_config || [...baseVipLevelRewardConfig]);

// 获取等级数据
const queryData = () => {
  const query = NetPacket.req_vip_info();
  PKwebsocket.instance.send(query, true)
}
const formatBigNumber = (val: number) => {
  return val.toLocaleString()
}
onMounted(() => {
  queryData();
})
watch(
  () => VIPinfo.value,
  (n) => {
    if (n) {
      vipLevelRewardConfig.value = n.vip_level_reward_config;
    }
  }
);
</script>

<style lang='scss' scoped>
@use './indexRules.scss';
</style>
